/*----------------------------------------
    * Pseudo-Classes
----------------------------------------*/
.jquery-notes-container .clearfix:after {
    clear:both;
    content:".";
    height:0px;
    display:block;
    visibility:hidden;
}
/*----------------------------------------
    * Reset
----------------------------------------*/
.jquery-notes-container * {
    margin:0;
    padding:0;
    list-style:none;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:10px;
    font-style:normal;
    font-weight:normal;
    text-decoration:none;
}
.jquery-notes-container div,
.jquery-notes-container img {
    border:none;
    background:none;
    outline:none;
}
/*----------------------------------------
    * Notes
----------------------------------------*/
.jquery-notes-container {
    position:relative;
    margin: 0px auto;
}
.jquery-notes-container .notes {
    position:relative;
}
.jquery-notes-container .notes img {
    position:relative;
}
.jquery-notes-container .notes .note {
    position:absolute;
    display:none;
}
.jquery-notes-container .notes .offFocus {
    opacity:0.3;
}
.jquery-notes-container .notes .onFocus {
}
.jquery-notes-container .notes:hover .note {
    display:block;
}
.jquery-notes-container .notes .select {
    z-index:9990;
}
.jquery-notes-container .notes .note .ui-resizable-handle {
    position:absolute;
    height:10px;
    width:10px;
    background:url("#{resource['img/jnotes:resize.png']}") no-repeat;
}
.jquery-notes-container .notes .note .ui-resizable-ne {
    right:0;
    top:0;
    cursor:ne-resize;
    background-position:-6px 2px;
}
.jquery-notes-container .notes .note .ui-resizable-nw {
    left:0;
    top:0;
    cursor:nw-resize;
    background-position:2px 2px;
}
.jquery-notes-container .notes .note .ui-resizable-se {
    right:0;
    bottom:0;
    cursor:se-resize;
    background-position:-6px -6px;
}
.jquery-notes-container .notes .note .ui-resizable-sw {
    left:0;
    bottom:0;
    cursor:sw-resize;
    background-position:2px -6px;
}
.jquery-notes-container .notes .note .border {
    position:relative;
    width:100%;
    height:100%;
    border:1px solid #fff;
    outline:1px solid #000;
}
.jquery-notes-container .notes .note .border .bg {
    position:relative;
    width:100%;
    height:100%;
    background:#fff;
    opacity:0.2;
}
.jquery-notes-container .notes .note .border .bg a {
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
.jquery-notes-container .notes .text {
    position:absolute;
    padding:5px;
    margin-top:4px;
    line-height:10px;
    background:#000;
    display:none;
    border-radius:5px;
    opacity:0.9;
    z-index:9990;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.jquery-notes-container .notes .text span {
    color:#fff;
}
.jquery-notes-container .notes .text .author {
    font-style:italic;
}
.jquery-notes-container .notes .text .date {
    color:#999;
    font-size:8px;
    font-style:italic;
    display:block;
}
/*----------------------------------------
    * Loading
----------------------------------------*/
.jquery-notes-container .notes .layer {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#fff;
    opacity:0.7;
    z-index:9999;
    display:none;
}
.jquery-notes-container .notes .loading {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:9999;
    display:none;
}
.jquery-notes-container .notes .loading .message {
    position:relative;
    margin:0 auto;
    width:100px;
    line-height:25px;
    padding:0 5px 0 25px;
    color:#fff;
    font-weight:bold;
    text-align:center;
    background:url("#{resource['img/jnotes:loader.gif']}") no-repeat 10px center #000;
    opacity:0.9;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
/*----------------------------------------
    * Notes Formular
----------------------------------------*/
.jquery-notes-container .notes .note .text-box {
    position:absolute;
    left:0;
    width:153px;
    margin-top:2px;
    z-index:9990;
}
.jquery-notes-container .notes .note .text-box textarea,
.jquery-notes-container .notes .note .text-box input {
    position:relative;
    padding:5px;
    margin-top:1px;
    width:141px;
    line-height:15px;
    font-family:verdana, sans-serif;
    font-size:10px;
    background:#fff;
    border:1px solid #777;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.jquery-notes-container .notes .note .text-box a {
    position:relative;
    margin:5px 2px 0 2px;
    height:16px;
    width:16px;
    display:block;
    background: #3f506a;
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.jquery-notes-container .notes .note .text-box a.save-note {
    background-image:url("#{resource['img/jnotes:save.png']}");
}
.jquery-notes-container .notes .note .text-box a.edit-note {
    background-image:url("#{resource['img/jnotes:edit.png']}");
}
.jquery-notes-container .notes .note .text-box a.cancel-note {
    background-image:url("#{resource['img/jnotes:cancel.png']}");
}
.jquery-notes-container .notes .note .text-box a.delete-note {
    background-image:url("#{resource['img/jnotes:delete.png']}");
}
/*----------------------------------------
    * Controller
----------------------------------------*/
.jquery-notes-container .controller {
    position:relative;
}
.jquery-notes-container .controller a {
    position:relative;
    margin:2px;
    height:16px;
    width:16px;
    display:block;
    background: #3f506a;
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.jquery-notes-container .controller a.counter {
    background-image:url("#{resource['img/jnotes:notes.png']}");
}
.jquery-notes-container .controller a.add-note {
    background-image:url("#{resource['img/jnotes:add.png']}");
}
.jquery-notes-container .controller a.cancel-note {
    background-image:url("#{resource['img/jnotes:cancel.png']}");
}
.jquery-notes-container .controller a.hide-notes {
    background-image:url("#{resource['img/jnotes:hide.png']}");
}
.jquery-notes-container .controller a.show-notes {
    background-image:url("#{resource['img/jnotes:show.png']}");
}
.jquery-notes-container .controller a.reload-notes {
    background-image:url("#{resource['img/jnotes:reload.png']}");
}
.jquery-notes-container .controller a.link {
    background-image:url("#{resource['img/jnotes:link.png']}");
}